<template>
  <!-- 3D轮播图 -->
  <div class="container header">
    <div class="content">
      <div class="a">
        <div class="b">
          <div class="c" style="--i: 0"></div>
          <div class="d" style="--i: 1"></div>
          <div class="e" style="--i: 2"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- 3D卡片 -->
  <div class="container my-5">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col box" v-for="(card, index) in cardData" :key="index">
        <div class="f">
          <div class="g" :style="{ backgroundImage: `url(${card.imageSrc})` }">
            <span class="h">{{ card.rightSide }}</span>
            <span class="i">{{ card.Reverse }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 模糊卡片 -->
  <div class="container mt-4">
    <div class="row justify-content-center">
      <!-- 左侧列 -->
      <div class="col-md-5 mb-4 me-md-4">
        <!-- From Uiverse.io by kamehame-ha -->
        <div class="box-cards">
          <div class="box-card yellow">
            <p class="tip">芸窗-编辑端</p>
            <p class="second-text">基于SpringCloud的期刊采编系统</p>
          </div>
          <div class="box-card blue">
            <p class="tip">作者：季秋</p>
            <p class="second-text">2024-2025</p>
          </div>
          <div class="box-card green">
            <p class="tip">编辑端说明</p>
            <p class="second-text">审核作者稿件，简化编辑人员操作</p>
          </div>
        </div>
      </div>

      <!-- 右侧列 -->
      <div class="col-md-5 mb-4">
        <div class="box-cards">
          <div class="box-card red">
            <p class="tip">敏感词库</p>
            <p class="second-text">自动打回敏感词稿件</p>
          </div>
          <div class="box-card purple">
            <p class="tip">3D页面</p>
            <p class="second-text">更符合前沿设计</p>
          </div>
          <div class="box-card sky">
            <p class="tip">AI助手</p>
            <p class="second-text">接入AI简化操作</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const cardData = [
  {
    imageSrc: require("@/assets/images/1.jpg"),
    rightSide: "季秋",
    Reverse: "JiQiu",
  },
  {
    imageSrc: require("@/assets/images/2.jpg"),
    rightSide: "芸窗",
    Reverse: "期刊采编",
  },
  {
    imageSrc: require("@/assets/images/3.jpg"),
    rightSide: "期刊",
    Reverse: "编辑端",
  },
];
</script>

<style scoped>
/* 3D轮播图 */
.header {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.a {
  position: relative;
  perspective: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.b {
  width: 400px;
  height: 250px;
  position: relative;
  transform-style: preserve-3d;
  animation: move 8s infinite cubic-bezier(0.7, 0, 0.17, 1);
}

.b div {
  position: absolute;
  background-size: cover;
  opacity: 0.9;
  width: 400px;
  height: 250px;
  transform: rotateY(calc(var(--i) * 120deg)) translateZ(600px);
}

.c {
  background-image: url("@/assets/images/1.jpg");
}

.d {
  background-image: url("@/assets/images/2.jpg");
}

.e {
  background-image: url("@/assets/images/3.jpg");
}

@keyframes move {
  0% {
    transform: translateZ(-100px) rotateY(0);
  }
  33% {
    transform: translateZ(-100px) rotateY(-120deg);
  }
  66% {
    transform: translateZ(-100px) rotateY(-240deg);
  }
  100% {
    transform: translateZ(-100px) rotateY(-360deg);
  }
}
/* 3D卡片 */
.box {
  display: flex;
  justify-content: center;
}
.f {
  width: 250px;
  height: 300px;
  position: relative;
}
.f:hover .g {
  transform: rotateY(180deg);
}
.g {
  width: 250px;
  height: 300px;
  background-color: #000;
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;
  transition: 1.5s;
  border-radius: 15px;
  box-shadow: 0 0 20px #000;
}
.h,
.i {
  position: absolute;
  color: rgba(255, 255, 255, 0.8);
  font: 900 35px "";
  /* 设置字体间距 */
  letter-spacing: 10px;
  line-height: 300px;
}
.h {
  transform: translateZ(70px);
}
.i {
  transform: translateZ(-70px) rotateY(180deg);
}
@media screen and (max-width: 996px) and (min-width: 768px) {
  .g {
    width: 200px;
    height: 250px;
  }
  .f {
    width: 200px;
    height: 250px;
  }
}
/* 模糊卡片样式 */
.box-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.box-cards .yellow {
  background-color: rgba(220, 220, 21, 0.8);
}

.box-cards .blue {
  background-color: rgba(35, 34, 107, 0.8);
}

.box-cards .green {
  background-color: rgba(0, 134, 105, 0.8);
}
.box-cards .red {
  background-color: rgba(90, 7, 15, 0.8);
}
.box-cards .purple {
  background-color: rgba(124, 52, 140, 0.8);
}
.box-cards .sky {
  background-color: rgba(0, 107, 169, 0.8);
}
.box-cards .box-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 7rem;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: 400ms;
}

.box-cards .box-card p.tip {
  font-size: 1.6em;
  font-weight: 700;
}

.box-cards .box-card p.second-text {
  font-size: 1em;
}

.box-cards .box-card:hover {
  transform: scale(1.1, 1.1);
}

.box-cards:hover > .box-card:not(:hover) {
  filter: blur(10px);
  transform: scale(0.9, 0.9);
}
</style>